<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta name="referrer" content="never">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcdn.net/ajax/libs/Base64/0.1.0/base64.min.js"></script>
    <![endif]-->
</head>
<style>
    .layui-table img{
        text-align:center;
        height: auto;
        white-space: normal;
        border-radius: 360px;
        max-width: 35px;
    }
    .layim-send-set .layui-edge{top:0px;}
</style>
<body>
<div class="layuimini-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <i class="fa fa-warning icon"></i>好友例表
                </div>
                <div class="layui-card-body">
                    <div class="welcome-module">
                        <table class="layui-hide" id="Table_Friends" lay-filter="TableFilter_Friends"></table>
                        <script type="text/html" id="TableBar_Friends">
                            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-chat" lay-event="chat">聊天</a>
<!--                            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>-->
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    var socket_friend,state=false;
    layui.use(['form', 'table','layim'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layim = layui.layim,
            table = layui.table;
        layim.config({
            brief: false //简约模式，不显示主面板
            ,maxLength: 2000
            ,mine: {
                "username": "管理员" //我的昵称
                ,"id": "01" //我的ID
                ,"status": "online" //在线状态 online：在线、hide：隐身
                ,"sign": "我只是一只咸鱼" //我的签名
                ,"avatar": "/images/tx.jpg" //我的头像
            }
        });
        table.render({
            elem: '#Table_Friends',
            url: '/getFriends/'+localStorage.getItem("bot_qq"),
            headers: {"token":localStorage.getItem("token")},
            cols: [[
                {field: 'imgurl', width: 80, title: '头像',templet:'<div><img src="{{d.imgurl}}"></div>',style:'height:100%;max-width:100%;', sort: true},
                {field: 'name', width: 120, title: '昵称', sort: true},
                {field: 'qq', width: 110, title: 'QQ',sort: true},
                {fixed: 'right',title: '操作', minWidth: 130, toolbar: '#TableBar_Friends', align: "center"}
            ]],
            limit: 99999,
            page: false,
            skin: 'line'
        })
        //监听发送消息
        layim.on('sendMessage', function(data) {
            // console.log(data);
            data.to['content']=data.mine.content
            data.to['username']=data.to.name
            // console.log(data.to);
            socket_friend.send(JSON.stringify(data.to))
        });
        layim.on('chatChange', function(obj){
            console.log(obj);
            if(state) {
                openSocket(localStorage.getItem("bot_qq"), obj.data.id);
            }else {
                state=true;
            }
        });
        /**
         * toolbar监听事件
         */
        table.on('tool(TableFilter_Friends)', function (obj) {
            if (obj.event === 'chat') {
                layim.chat({//打开聊天窗口
                    name: obj.data.name
                    ,id: obj.data.qq
                    ,avatar: obj.data.imgurl
                    ,type: 'kefu' //聊天类型
                });
                openSocket(localStorage.getItem("bot_qq"),obj.data.qq);
            }else{
                console.log(JSON.stringify(obj))
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });
        function openSocket(qq,friend) {
            var socketUrl="ws://"+window.location.host+"/chat_friend/"+qq+"/"+friend+"/"+window.btoa(localStorage.getItem("token"));
            if(typeof(WebSocket) == "undefined") {
                alert("你的浏览器不支持websocket，请升级到IE10以上浏览器，或者使用谷歌、火狐、360浏览器。");
            }else{
                if(socket_friend!=null){
                    socket_friend.close();
                    socket_friend=null;
                }
                socket_friend = new WebSocket(socketUrl);
                //打开事件
                socket_friend.onopen = function() {
                    console.log("websocket已打开");
                };
                //获得消息事件
                socket_friend.onmessage = function(msg) {
                    console.log(msg.data)
                    if(msg.data!=="服务连接成功"){
                    var obj = JSON.parse(msg.data);
                    layim.getMessage(obj);//回复消息
                    }
                };
                //关闭事件
                socket_friend.onclose = function() {
                    console.log("websocket已关闭");
                };
                //发生了错误事件
                socket_friend.onerror = function() {
                    console.log("websocket发生了错误");
                }
            }
        }
    });
</script>
</body>
</html>